<template>
  <div style="width: 100%" class="flex-row">
    <div style="width: 40%">
      <div class="header flex-row">
        <h2 style="margin-left: 25px">习惯打卡</h2>
        <div style="margin-left: 80px">
          <label>坚持中</label>
          <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
          <label>已归档</label>
        </div>
        <el-button @click="dialogFormVisible = true" type="primary" style="margin-left: 30%" plain circle>
          <i class="el-icon el-icon-plus"></i>
        </el-button>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="item">
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="item.hTaskTitle" autocomplete="off"></el-input>
            </el-form-item>
            <div class="flex-row" style="justify-content: space-between">
              <el-form-item label="频率" :label-width="formLabelWidth">
                <el-select v-model="item.region" placeholder="请选择频率">
                  <el-option label="一天一次" value="shanghai"></el-option>
                  <el-option label="一周一次" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="天数" :label-width="formLabelWidth">
                <<el-input v-model="item.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>

      </div>
      <el-collapse-transition>
        <div class="main" v-show="value">
          <div @click="habitId = habit.hTaskId;getSigns(habitId)" :style="isSelected(habit.hTaskId)" class="habit flex-row" v-for="(habit) in habits" :key="habit.hTaskId" >
            <svg-icon :icon-class="Math.abs(parseInt(habit.hTaskId)).toString()" class="small"/>
            <div style="width: 40%">{{habit.hTaskTitle}}</div>
            <el-button v-if="done[habit.hTaskId]" disabled style="margin-left: 5%;padding: 8px 10px;" type="success" size="small" plain>已打卡</el-button>
            <el-button v-else style="margin-left: 5%;padding: 8px 10px;" type="success" size="small" plain>今日打卡</el-button>
            <div class="flex-row" style="font-size: 12px;color: #a6eaea" >已经坚持
              <div style="font-size: 20px;color: #dd1919" >{{habit.hTaskContinuousSignIn}}</div>
              天</div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <div style="width: 60%" v-show="value">
      <div class="header flex-row">
        <h3 style="margin-left: 25px">{{ habits[Number(habitId-1)].hTaskTitle }}</h3>
      </div>
      <el-calendar style="width: 100%" v-model="aDate">
        <template
            slot="dateCell"
            slot-scope="{date, data}">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{data.day.split('-').slice(1).join('-')}}
            {{ isSinged(data.day.split('-').slice(1).join('-')) ? '✔️' : ''}}
          </p>
        </template>
      </el-calendar>
    </div>
  </div>


</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
name: "ManPageRightTab1",
  data() {
    return {
      value: true,
      habitId:1,
      aDate:new Date(),
      done:[],
      habitedTask:{
        hTaskId:'',
        hTaskTitle:'',
        hTaskDescription:'',
        hTaskContinuousSignIn:'',
        hTaskWeekFrequency:'',
        hTaskDaySignInFrequency:'',
        hTaskGmtCreate:'',
        hTaskGmtUpdate:'',
        hTaskVersion:'',
        hTaskDeleted:'',
        userId:''
      },
      dialogFormVisible: false,
      formLabelWidth: '60px',
      hTaskSignIn:{
        hSignInId:'',
        hSignInGmtCreate:'',
        hSignInGmtUpdate:'',
        hSignInVersion:'',
        hTaskId:''
      }
    }
  },
  computed:{
    ...mapState('module1',['habits']),
    ...mapState('module2',['signs'])

  },
  methods:{
    ...mapActions('module1',['getHabits']),
    ...mapActions('module2',['getSigns']),
    isSelected(key){
      if(Number(key) === Number(this.habitId)){
        return {background:'#80ecec'}
      }else {
        return {background:'white'}
      }
    },
    isSinged(value){
      let it = false
      for (const sign of this.signs) {
        if(this.timeToDay(sign.hSignInGmtCreate) === value) it = !it
      }
      return it
    },
    timeToDay(time) {
      if(time.length <= 11) return time;
      let datetime = new Date();
      datetime.setTime(time);
      //let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      let date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime
      .getDate();
      return month+'-'+date;
    },


  },
  mounted() {
    for (const sign of this.signs) {

      if(this.timeToDay(sign.hSignInGmtCreate)===this.timeToDay(new Date())) this.done[sign.taskId] = false
    }
  },
  created() {
    this.getHabits(this.$cookie.get('userId'))
    this.getSigns(this.habitId)

    for (const sign of this.signs) {

      if(this.timeToDay(sign.hSignInGmtCreate)===this.timeToDay(new Date())) {
        this.done.unshift(true)

      }else{
        this.done.unshift(false)
      }

    }
  },
}
</script>

<style scoped>
.header{
  align-items: center;
  height: 10%;
}
.main{
  box-shadow: 1px -1px 1px #efecec;
  height: 70%;
}
.small{
  width: 30px;
  height: 30px;
}
.habit{
  align-items: center;
  padding:10px 10px;
  justify-content: space-between;
}
.habit:hover{
  background: #f0f8f8;
}
</style>
